import { ElSteps, ElStep, StepProps } from 'element-plus';
import { PropType } from 'vue';
import './index.scss';

export const MciStep = ElStep;
export interface IStep extends StepProps {
  vSlots?: {
    icon?: () => TAnyFunction<JSX.Element | string>;
    title?: () => TAnyFunction<JSX.Element | string>;
    description?: () => TAnyFunction<JSX.Element | string>;
  };
}
export const MciSteps = defineComponent({
  name: 'MciSteps',
  props: {
    list: {
      type: Array as PropType<StepProps[]>,
      default: () => null
    }
  },
  setup(props, { slots }) {
    const defaultSlots = computed(() => {
      if (props.list?.length) {
        return () => props.list.map((attrs) => <MciStep {...attrs} />);
      }
      return slots.default;
    });
    return () => <ElSteps class="mci-steps" vSlots={{ ...slots, default: defaultSlots.value }} />;
  }
});
